<template>
	<view class="survey-wrap">
		<text class="tips" :class="{'warn': result.need }">{{ result.message }}</text>
		<view class="collaspe-wrap">
			<view class="title" @click="isShowItem = !isShowItem">
				<text class="gradient-text">居家自查</text>
				<view class="arrow" :class="{ 'down': isShowItem }">
					<image src="../../static/arrow.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="content" v-show="isShowItem" v-for="good in goods" :key="good.id">
				<view class="goods-title">
					<text>{{ good.title }}</text>
					<text class="gradient-text">查看产品详情</text>
				</view>
				<view class="goods-desc van-multi-ellipsis--l2">{{ good.desc }}</view>
				<view class="flex" @click="onBuy(good.id)">
					<view class="price-wrap">原价：{{good.price}}元</view>
					<view class="buy gradient-text">点击购买</view>
				</view>
			</view>
		</view>
		
		<view class="toHospital">医院门诊就诊</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				isShowItem: false
			}
		},
		
		onLoad() {
			this.getGoods();
		},
		
		computed: {
			...mapState({
				goods: state => state.survey.list,
				result: state => state.survey.result
			})
		},
		
		methods: {
			getGoods() {
				this.$store.dispatch('survey/getSCGoods')
			},
			onBuy(id) {
				this.$store.dispatch('succes/setSuccessId', {
					id,
					next: '/pages/address/address'
				})
				
				this.$nextTick(function(){
					uni.navigateTo({
						url: '/pages/success/success'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
.tips {
	font-size: 26rpx;
	line-height: 26rpx;
	
	&.warn {
		color: #fc0200;
	}
}

.survey-wrap {
	padding: 20rpx;
	
	.title {
		margin: 20rpx auto;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 50rpx;
		line-height: 50rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		
		.arrow {
			width: 30rpx;
			
			image {
				width: 30rpx;
				transition: all ease 0.3s;
			}
			&.down image {
				transform: rotate(180deg);
			}
		}
		
		text {
		  font-weight: bold;
		}
	}
	
	.content {
		margin: 36rpx;
		background-color: #fff;
		padding: 26rpx 36rpx;
		border-radius: 20rpx;
		
		.goods-title {
			font-size: 30rpx;
			line-height: 48rpx;
			font-weight: bold;
			
			text {
				margin-right: 36rpx;
			}
			
			.gradient-text {
				font-size: 28rpx;
			}
		}
		
		.goods-desc {
			font-size: 24rpx;
			line-height: 2;
		}
		
		.flex {
			display: flex;
			margin-top: 30rpx;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
		}
	}
	
	.toHospital {
		font-size: 36rpx;
		font-weight: bold;
		background-color: #FFFFFF;
		padding: 20rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 20rpx;
		margin: 20rpx auto;
	}
}
</style>
